﻿<!DOCTYPE html>
<html>
<head>
	<%
	include("/static/include/title.html"){}
	include("/static/include/css.html"){}
	include("/static/include/js.html"){}
	%>
</head>
<body onload="changeType(${role.typeFlag});">
<div class="layui-fluid">

	<form id="fUpdate" class="layui-form" action="#" onsubmit="return false" method="post">
		<input type="hidden" id="dialogId" name="dialogId" value="${parameter.dialogId}"/>
		<input type="hidden" name="role.id" value="${role.id}"/>

		<div class="layui-card">
			<div class="layui-card-header">基本信息</div>
			<div class="layui-card-body" style="padding: 15px;">
				<!-- 如一行显示多列数据，参照下面的示例 -->
				<!--
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">属性1：</label>
						<div class="layui-input-inline">
							<input type="text" autocomplete="off" class="layui-input" maxlength="25" title="属性1对应控件">
						</div>
					</div>对应控件
					<div class="layui-inline">
						<label class="layui-form-label">属性2：</label>
						<div class="layui-input-inline">
							<input type="text" autocomplete="off" class="layui-input" maxlength="25" title="属性1对应控件">
						</div>
					</div>
				</div>
				-->
				<input type="hidden" name="role.typeFlag" value="1"/>
				<!--
				<div class="layui-form-item">
					<label class="layui-form-label">角色类别<span style="color:#FF5722;">*</span>：</label>
					<div class="layui-input-block">
                        <% if(has(typeList) && typeList != null) { for(i in typeList) {%>
                        <input type="radio" name="role.typeFlag" value="${i.key}" title="${i.value}"<% if(role.typeFlag == i.key) {%> checked<%}%> lay-filter="changeType"/>
                        <%}}%>
					</div>
				</div>
				-->
				<div class="layui-form-item">
					<label class="layui-form-label">角色名称<span style="color:#FF5722;">*</span>：</label>
					<div class="layui-input-block">
						<input type="text" name="role.roleName" placeholder="角色名称" value="${@team.bangbang.common.utility.LogicUtility.getQuotedString(role.roleName)}" autocomplete="off" class="layui-input" maxlength="25">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">角色说明：</label>
					<div class="layui-input-block">
						<textarea name="role.remark" placeholder="请输入角色说明，限500个字以内" class="layui-textarea">${role.remark}</textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">欢迎页地址</label>
					<div class="layui-input-block">
						<input type="text" name="role.welcomePage" placeholder="登录后显示的欢迎页地址" value="${@team.bangbang.common.utility.LogicUtility.getQuotedString(role.welcomePage)}" autocomplete="off" class="layui-input" maxlength="200">
					</div>
				</div>
			</div>
		</div>

		<div id="cbxModule2" style="display:none;"></div>
	</form>

	<div class="layui-card">
		<div class="layui-card-header">权限信息</div>
		<div class="layui-card-body" id="permissionHeader" style="padding: 15px;">
			<div class="layui-tab">
				<ul class="layui-tab-title">
					<% if(has(modules) && modules != null){ for(i in modules) {%>
					<li id="menubg_${i.id}"<% if(iLP.index == 1) {%> class="layui-this"<%}%> onclick="showModule('${i.id}');">${i.name}</li>
					<%}}%>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<div id="cbxModule"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="layui-form-item layui-layout-admin">
		<div class="layui-input-block">
			<div class="layui-footer" style="left: 0;">
				<button class="layui-btn" onclick="doUpdateAction('role');">修 改</button>
			</div>
		</div>
	</div>
</div>
<script>
    layui.use(['form'], function(){
        var form  = layui.form;
        form.on("radio(changeType)", function(data){
            changeType(data.value);
        });
        // 渲染表单radio、select、checkbox
        form.render();
    });

    // 同步checkbox状态，兼容非IE浏览器
    function jianrong() {
        try {
            // 非IE，设置checkbox的check属性
            var arr = getAllCheckBox();

            for(var i = 0; i < arr.length; i++) {
                if(arr[i].checked) {
                    arr[i].setAttribute("checked", arr[i].checked);
                } else {
                    arr[i].removeAttribute("checked");
                }
            }
        } catch (e) {}
    }

    function validate(theForm) {
        // 注意：
        // 如果更改页面表单的控件类型，请在校验判断时做对应修改：
        // 1. 下拉框：使用 $.trim(theForm["控件名称"].value) == ""
        // 2. 单选框/复选框：使用 getChoiceValue("控件名称") == null
        //
        if($.trim(theForm["role.roleName"].value) == "") {
            $.message("角色名称不能为空！");
            return false;
        }
        // 角色说明，限500个字以内
        var remark = theForm["role.remark"].value;
        var len = getByteLength(remark);
        if(len > 500) {
            $.message("角色说明不能超过500个字！<br/>当前 " + len + " 个字。");
            return false;
        }

        jianrong();

        // 在提交之前，将所有的checkbox选择情况填入cbxModule2层中
        var str = "";
    	<% if(has(modules) && modules != null){ for(i in modules) {%>
		if("${i.id}" != currModuleId) {
			str += arrModule["${i.id}"];
		} else {
			str += document.getElementById("cbxModule").innerHTML;
        }
        <%}}%>
        document.getElementById("cbxModule2").innerHTML = str;

        return true;
    }

    var allcb = null;
    function doCheck(ele) {
        allcb = getAllCheckBox();
        // 设置
        setSonsStatus(ele.value, ele.checked);

        // 同步父项状态
        var parentEle = getParentCheckBox(ele.value);

        var deep = 0;
        while(parentEle != null) {
            synchronizeStatus(parentEle);
            parentEle = getParentCheckBox(parentEle.value);
        }
        arrModule[currModuleId] = document.getElementById("cbxModule").innerHTML;
    }

    // 如果此ele的所有子项全部checked，设置此element状态checked
    // 如果此ele的所有子项全部unchecked，设置此element状态unchecked
    function synchronizeStatus(ele) {
        var status = getSonsStatus(ele.value);

        switch(status) {
            case -1:
            case 0:
                ele.checked = false;
                break;
            case 1:
                ele.checked = true;
                break;
        }
    }

    // 得到所有CheckBox
    function getAllCheckBox() {
        var cbEles = new Array();
        var allChbEles = document.getElementsByName("checkboxmenu");

        if(allChbEles == null) {
        } else if(allChbEles.length == null || allChbEles.length == 1) {
            cbEles.push(allChbEles);
        } else {
            for(var i = 0; i < allChbEles.length; i++) {
                cbEles[i] = allChbEles[i];
            }
        }

        return cbEles;
    }

    function getParentCheckBox(cbValue) {
        var parentEle = null;
        for(var i = 0; i < allcb.length; i++) {
            if(cbValue.indexOf(allcb[i].value) == 0) {
                if(allcb[i].value != cbValue && (parentEle == null || parentEle.value.length < allcb[i].value.length)) parentEle = allcb[i];
            }
        }
        return parentEle;
    }

    // 得到所有子项
    function getSonsCheckBox(cbValue) {
        var sons = new Array();
        var j = 0
        for(var i = 0; i < allcb.length; i++) {
            if(allcb[i].value.indexOf(cbValue) == 0 && allcb[i].value != cbValue) sons[j++] = allcb[i];
        }

        return sons;
    }

    // 设置所有子项状态
    function setSonsStatus(cbValue, status) {
        var sons = getSonsCheckBox(cbValue);
        for(var i = 0; i < sons.length; i++) {
            sons[i].checked = status;
        }
    }

    // 和所有子类的check状态保持同步

    // checked status
    // -2： 没有子项
    // -1: false
    // 0: 有false和true都有
    // 1：true
    function getSonsStatus(cbValue) {
        var sons = getSonsCheckBox(cbValue);
        if(sons.length == 0) return -2;

        var status = sons[0].checked;
        for(var i = 1; i < sons.length; i++) {
            if(status != sons[i].checked) return 0;
        }

        return (status?1:-1);
    }

    // 用于临时存储模块checkbox群组的HTML字符串
    var arrModule = new Array();
    // 调用AJAX获取该角色在各个模块下的checkbox群组
    <% if(has(modules) && modules != null){ for(i in modules) {%>
        $.ajax({
            url: "../api/menu/getMenuStringForRole?roleId=${role.id}&moduleId=${i.id}",
            success:function(result) {
                if(result.statusCode == null || result.statusCode != 200) return;
                arrModule['${i.id}'] = $.trim(result.data);
            }
        });
    <%}}%>

    // 当前的模块
    var currModuleId = "${modules[0].id}";
    function showModule(mId){
        // 同步checkbox状态，兼容非IE浏览器
        jianrong();

    <% if(has(modules) && modules != null){ for(i in modules) {%>
        document.getElementById("menubg_${i.id}").className = ("${i.id}" == mId) ? "layui-this" : "";
    <%}}%>

        var oldValue = $.trim(document.getElementById("cbxModule").innerHTML);
        if(oldValue != null && oldValue != "") {
            arrModule[currModuleId] = oldValue;
        }

        // 如果临时存储区域有checkbox群组的HTML字符串
        if(arrModule[mId] != null && $.trim(arrModule[mId]) != "") {
            document.getElementById("cbxModule").innerHTML = arrModule[mId];
            currModuleId = mId;
            return;
        }

        // 调用AJAX获取该角色在指定模块下的checkbox群组
        $.ajax({
            url: "../api/menu/getMenuStringForRole?roleId=${role.id}&moduleId=" + mId,
            success:function(result) {
                if(result.statusCode == null || result.statusCode != 200) return;

                document.getElementById("cbxModule").innerHTML = result.data;
                arrModule[mId] = result.data;
            }
        });

        currModuleId = mId;
    }

    showModule("${modules[0].id}");

    var pHeader = null;
    // typeFlag: 角色类别标识（1：权限角色　2：审核角色）
    function changeType(typeFlag) {
        // 如果选择 权限角色，显示权限勾选信息
        if(typeFlag == 1) {
            if(pHeader != null) {
                document.getElementById("permissionHeader").innerHTML = pHeader;
            }

            document.getElementById("cbxModule").innerHTML = arrModule[currModuleId];

            return;
        }

        // 如果选择 审核角色，隐藏勾选信息
        if(typeFlag == 2) {
            var pHeaderTemp = document.getElementById("permissionHeader").innerHTML;
            if(pHeaderTemp != null && pHeaderTemp != "") {
                pHeader = pHeaderTemp;
            }

            // 保存当前checkbox群组的HTML字符串
            arrModule[currModuleId] = document.getElementById("cbxModule").innerHTML;

            document.getElementById("cbxModule").innerHTML = "";
            document.getElementById("permissionHeader").innerHTML = "";
            return;
        }
    }
</script>
</body>
</html>